
<!DOCTYPE html>
<html lang="zh-CN" class="app">
	
<!-- Mirrored from easp.jswwl.com/?api/Easp.Plug.Bs by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 13 Nov 2021 05:15:03 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
		<meta charset="utf-8" />
		<title>Easp.Plug.Bs - EasyASP API 文档</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
		<link href="../cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
		<link href="../cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet">		<link href="../cdn.bootcss.com/prettify/r298/prettify.min.css" rel="stylesheet">
		<link rel="stylesheet" href="inc/css/animate.css" type="text/css" />
		<link rel="stylesheet" href="inc/css/simple-line-icons.css" type="text/css" />
		<link rel="stylesheet" href="inc/css/font.css" type="text/css" />
		<link rel="stylesheet" href="inc/css/app.css" type="text/css" />
		<link rel="stylesheet" href="inc/editor/css/editormd.preview.min.css" />
		<!--<link href='http://api.youziku.com/webfont/CSS/57358c19f629d8086c49377f' rel='stylesheet' type='text/css' />-->
		<!--[if lt IE 9]>
			<script src="inc/js/ie/html5shiv.js"></script>
			<script src="inc/js/ie/respond.min.js"></script>
			<script src="inc/js/ie/excanvas.js"></script>
		<![endif]-->
	</head>
	<body>
		<section class="vbox">
			<header class="bg-white-only header header-md navbar navbar-fixed-top-xs">
	<div class="navbar-header aside bg-info dk">
		<a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open" data-target="#nav,html"> <i class="icon-list"></i></a>
		<a href="index.html" class="navbar-brand text-lt"> <img src="inc/images/logo.png" alt="."> <span class="hidden-nav-xs m-l-sm english">EasyASP</span></a>
	</div>
	<ul class="nav navbar-nav hidden-xs">
		<li>
			<a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted"> <i class="fa fa-dedent text"></i><i class="fa fa-indent text-active"></i></a>
		</li>
	</ul>
	<!--<form class="navbar-form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
		<div class="form-group">
			<div class="input-group">
				<span class="input-group-btn">
					<button type="button" class="btn btn-sm bg-white btn-icon rounded"><i class="fa fa-search"></i></button>
				</span>
				<input type="text" class="form-control input-sm no-border rounded" id="search" placeholder="Search API">
			</div>
		</div>
	</form>-->
	<ul class="nav nav-pills pull-right topnav hidden-xs">
		<li role="presentation"><a href="http://www.easyasp.cn/" target="_blank">EASP官网</a></li>
		<li role="presentation"><a href="http://www.easyasp.cn/downloads" target="_blank">下载</a></li>
		<li role="presentation"><a href="http://www.easyasp.cn/tutorials" target="_blank">教程</a></li>
		<li role="presentation" class="active"><a href="javascript:;">API文档</a></li>
		<li role="presentation"><a href="http://www.easyasp.cn/plugins" target="_blank">插件</a></li>
		<li role="presentation"><a href="http://bbs.easyasp.cn/" target="_blank">论坛</a></li>
		<li role="presentation"><a href="http://www.easyasp.cn/donate" target="_blank">捐赠</a></li>
	</ul>
</header>
			<section>
				<section class="hbox stretch">
					
<aside class="bg-dark dk aside hidden-print" id="nav">
	<section class="vbox">
		<section class="w-f-md scrollable">
			<div class="slim-scroll" data-height="auto" data-disable-fade-out="true" data-distance="0" data-size="10px" data-railOpacity="0.2">
				<nav class="nav-primary hidden-xs">
					<ul class="nav" data-ride="collapse">
						<li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted"></li>
						<li class=""><a href="index368f.html?api/Easp.BasePath" class="auto"><i class="fa-leaf fa"></i><span>基础公共函数</span></a></li>
						<li class="">
							<a href="#" class="auto"><span class="pull-right text-muted"><i class="fa fa-angle-left text"></i><i class="fa fa-angle-down text-active"></i></span><i class="fa-font fa"></i><span>字符串处理</span></a>
							<ul class="nav dk text-sm">
								<li class=""><a href="index19fa.html?api/Easp.Str.EncodeJsonUnicode" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>字符串处理</span></a></li>
								<li class=""><a href="index843b.html?api/StringBuilder.NewLine" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>String Builder</span></a></li>
								<li class=""><a href="indexbede.html?api/Validation.Value" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>表单验证</span></a></li>
							</ul>
						</li>
						<li class=""><a href="index86e2.html?api/Easp.Date.Format" class="auto"><i class="fa-calendar fa"></i><span>日期处理</span></a></li>
						<li class=""><a href="index2520.html?api/Easp.Error.E" class="auto"><i class="fa-bug fa"></i><span>异常处理</span></a></li>
						<li class=""><a href="index3c88.html?api/Easp.Console.Enable" class="auto"><i class="fa-stethoscope fa"></i><span>控制台调试</span></a></li>
						<li class=""><a href="index23ba.html?api/Easp.Var.Var" class="auto"><i class="fa-magic fa"></i><span>超级变量</span></a></li>
						<li class=""><a href="index6241.html?api/Easp.Db.QueryTimes" class="auto"><i class="fa-bars fa"></i><span>数据库操作</span></a></li>
						<li class="">
							<a href="#" class="auto"><span class="pull-right text-muted"><i class="fa fa-angle-left text"></i><i class="fa fa-angle-down text-active"></i></span><i class="fa-truck fa"></i><span>JSON 解析与生成</span></a>
							<ul class="nav dk text-sm">
								<li class=""><a href="index3fac.html?api/Easp.Json.EncodeUnicode" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>JSON 解析与生成</span></a></li>
								<li class=""><a href="index1814.html?api/Object.Get" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>JsonObject 对象</span></a></li>
								<li class=""><a href="indexd2e5.html?api/Array.Get" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>JsonArray 对象</span></a></li>
							</ul>
						</li>
						<li class=""><a href="index0e2b.html?api/Easp.List.New" class="auto"><i class="fa-rocket fa"></i><span>超级数组</span></a></li>
						<li class=""><a href="index8d16.html?api/Easp.Fso.fsoName" class="auto"><i class="fa-copy fa"></i><span>文件系统处理</span></a></li>
						<li class=""><a href="index3006.html?api/Easp.Tpl.FilePath" class="auto"><i class="fa-bolt fa"></i><span>模板引擎</span></a></li>
						<li class=""><a href="indexc31d.html?api/Easp.Tar.SavePath" class="auto"><i class="fa fa-file-zip-o"></i><span>无组件压缩解压</span></a></li>
						<li class="">
							<a href="#" class="auto"><span class="pull-right text-muted"><i class="fa fa-angle-left text"></i><i class="fa fa-angle-down text-active"></i></span><i class="fa-upload fa"></i><span>无组件上传</span></a>
							<ul class="nav dk text-sm">
								<li class=""><a href="index7b7b.html?api/Easp.Upload.AllowMaxSize" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>无组件上传</span></a></li>
								<li class=""><a href="index2627.html?api/File.ContentType" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>文件对象</span></a></li>
							</ul>
						</li>
						<li class=""><a href="index14f8.html?api/Easp.Http.New" class="auto"><i class="icon-link icon"></i><span>远程文件处理</span></a></li>
						<li class="">
							<a href="#" class="auto"><span class="pull-right text-muted"><i class="fa fa-angle-left text"></i><i class="fa fa-angle-down text-active"></i></span><i class="fa-cloud-download fa"></i><span>缓存处理</span></a>
							<ul class="nav dk text-sm">
								<li class=""><a href="index2221.html?api/Easp.Cache.New" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>缓存处理</span></a></li>
								<li class=""><a href="index99f4.html?api/Info.Expires" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>缓存文件操作</span></a></li>
							</ul>
						</li>
						<li class="">
							<a href="#" class="auto"><span class="pull-right text-muted"><i class="fa fa-angle-left text"></i><i class="fa fa-angle-down text-active"></i></span><i class="fa-rss-square fa"></i><span>XML文件处理</span></a>
							<ul class="nav dk text-sm">
								<li class=""><a href="index00fb.html?api/Easp.Xml.Open" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>XML文件处理</span></a></li>
								<li class=""><a href="index27f6.html?api/Node.Dom" class="auto"> <i class="fa fa-angle-right text-xs"></i><span>XML节点对象操作</span></a></li>
							</ul>
						</li>
						<li class="active"><a href="index4112.html?api/Easp.Plug.Bs" class="auto"><i class="fa-plug fa"></i><span>拓展插件</span></a></li>
					</ul>
				</nav>
			</div>
		</section>
	</section>
</aside>
					<section id="content">
						<section class="vbox">
							<section class="w-f-md" id="bjax-target">
								<section class="hbox stretch">
<aside class="aside bg-light dk" id="sidebar">
	<section class="vbox animated">
		<section class="scrollable hover">
			<div class="list-group no-radius no-border no-bg auto en class-li">
<a href="index4112.html?api/Easp.Plug.Bs" class="active list-group-item method">Easp.Plug.Bs</a>
<a href="index5b0e.html?api/Easp.Plug.Alidayu" class=" list-group-item method">Easp.Plug.Alidayu</a>
<a href="indexf0c6.html?api/Easp.Plug.MD5" class=" list-group-item method">Easp.Plug.MD5</a>

			</div>
		</section>
	</section>
</aside>
									<section id="content">
										<section class="vbox">
											<section class="w-f-md" id="bjax-target">
												<section class="hbox stretch">
													<aside class="col-lg-6 b-l">

<section class="vbox">

<section class="scrollable padder-v hover m-t m-b" id="test-editormd-view">

<textarea id="append-test" style="display:none;">
## Easp("Bs")
插件，Bootstrap 代码片码生成插件
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-code"></i> 语法</label></h4>

```asp
Easp("Bs")(string)
Set obj = Easp("Bs").New
```
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-cogs"></i> 参数</label></h4>

|参数|类型|说明
| ------------ | ------------ |
|string|String(字符串)|可以是自定义的模板片段，也可以是内置的片段名称
|obj|Object(ASP对象)|创建一个新的BS对象的名称

方法 `Easp("Bs").New` 用于创建一个新的BS片段对象，这样可以省写很多代码，我是多么体贴啊，呵呵

####内置的片段名称
|名称|说明
| ------------ | ------------ |
|`btn`|按钮
|`btna`|链接形式的按钮
|`dropdown`|下（上）拉菜单
|`btnGroup`|按钮组形式的下（上）拉菜单
|`FormInline:text`|单行表单的文本框
|`FormInline:textarea`|单行表单的多行文本框
|`FormInline:checkbox`|单行表单的复选框
|`FormInline:radio`|单行表单的单选框
|`FormInline:select`|单行表单的下拉菜单
|`FormInline:static`|单行表单的静态文本
|`Form:text`|水平排列表单的文本框
|`Form:textarea`|水平排列表单的多行文本框
|`Form:checkbox`|水平排列表单的复选框
|`Form:radio`|水平排列表单的单选框
|`Form:select`|水平排列表单的下拉菜单
|`Form:static`|水平排列表单的静态文本
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-reply"></i> 返回值</label></h4>

|类型|说明
| ------------ | ------------ |
|String(字符串)|替换好模板标签内容的 Bootstrap 代码片段
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-info-circle"></i> 说明</label></h4>

方便快速生成大段 Bootstrap 代码片段的插件。内置大量原生的 Bootstrap 代码片段，并用链式的方法进行对应内容标签的替换。

####[点我下载](http://blog.jam1.cn/upload/20160706/14677754929087082.zip "点我下载")

使用方法，将 `easp.bs.asp` 放到 `easyasp/plugin` 目录中即可。

####内置链式方法列表
|名称|说明
| ------------ | ------------ |
|`.Str(string)`|对应替换内置代码片段中的`{str}`标签，主要用在按钮，下拉菜单的显示文字
|`.Id(string)`|对应替换内置代码片段中的`{id}`标签，主要用在每种元素的 ID 值
|`.Name(string)`|对应替换内置代码片段中的`{name}`标签，主要用在每种元素的 name 值
|`.Css(string)`|对应替换内置代码片段中的`{css}`标签，主要用在代码片段中主元素的自定义 CSS 拓展
|`.Type(string)`|对应替换内置代码片段中的`{type}`标签，内置名称为 `btn` 时，可选填 `button` `submit` 内置名称为 `dropdown` 或 `btnGroup` 时，可选填 `down` `up` ；如果为表单文本框时，可选填 `text` `password` 
|`.Label(string)`|对应替换内置代码片段中的`{label}`标签，主要用在表单的 Label 文字
|`.Url(string)`|对应替换内置代码片段中的`{url}`标签，主要用在按钮和下拉菜单的链接
|`.Val(string)`|对应替换内置代码片段中的`{val}`标签，主要用在表单的默认值
|`.Disabled`|对应替换内置代码片段中的`{disabled}`标签，各元素的禁用
|`.HideLabel`|对应替换内置代码片段中的`{labelhide}`标签，主要用在单行表单的 `label` 文字隐藏
|`.PlaceHolder(string)`|对应替换内置代码片段中的`{ph}`标签，主要用在单行表单文本框，多行文本框的初始描述
|`.Row(int)`|对应替换内置代码片段中的`{row}`标签，主要用在多行文本框的行高数
|`.Size(int)`|对应替换内置代码片段中的`{size}`标签，主要用在下拉选择框的行高数，必须配合 `.Multiple` 方法
|`.Multiple`|对应替换内置代码片段中的`{multiple}`标签，主要用在下拉选择框的多行显示方式，配合 `.Size(int)` 方法设置行高
|`.F(string)`|通用方法，其 `string` 值为 `"name:value"`的形式，`name` 为你自定义代码片段中花括号 `{name}` 中的名称， `value` 就是你想替换标签的值，`name` 也可以是上述所有方法的标签名称，也就是说，可以用这个方法来取代上述所有方法。
|`.Loop(json,string)`|对应替换内置代码片段中的`{loop}`标签，主要用在下拉菜单，复选，单选，下拉选择等需要有循环内容的地方，参数 `json` 可以是符合标准格式的 `json` 对象，也可以是你自己组合好的循环里的 html 代码，如果使用 `json` 对象，则第二个参数必须指定循环体的类型，可选值为 `li` `checkbox` `radio` `select`，具体每种的JSON格式要求见下面示例
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-plug"></i> 示例</label></h4>

```asp
'自定义代码片段'
Set BS = Easp("Bs").New
s = "<span class=""label {css}"">{str}</span>"
Easp.WN BS(s).Str("我是自定义出来的").Css("label-success")
Easp.WN BS(s).Str("我是自定义出来的").Css("label-warning")
Easp.WN BS(s).Str("我是自定义出来的").Css("label-info")
'自定义代码片段 & 自定义标签'
Easp.WN BS(s).F("str:我是自定义出来的").F("css:label-success")
'======================================================================================='
'按钮'
Easp.WN BS("btna").Str("点我点我").Css("btn btn-primary btn-sm")
Easp.WN BS("btn").Type("button").Str("点我点我").Css("btn-success btn-lg").Url("javascript:history.back();")
'======================================================================================='
'下拉菜单'
'JSON对象数据'
Set Json = Easp.Json.NewArray
For i = 0 To 2
	Json(i) = Easp.Json.NewObject
	Json(i)("type") = "li"	'li普通,header标题,separator分隔线,disabled禁用 四种状态'
	Json(i)("name") = "菜单"&i	'菜单名称'
	Json(i)("url") = "链接"&i	'菜单链接'
Next 
Easp.WN BS("dropdown").Type("down").Str("下拉菜单").Id(Easp.NewID).Css("btn btn-primary btn-sm").Loop(Json,"li")
'字符串数据'
s = "<li><a href="#"{url}"">{str}</a></li>"
For i = 0 To 2
	a = a & bs(s).Str("菜单"&i).Url("javascript:history.back();")
Next 
Easp.WN BS("dropdown").Type("up").Str("上拉菜单A").Id(Easp.NewID).Css("btn btn-primary btn-sm").F("li:"&a)
'======================================================================================='
'分裂式按钮下拉菜单'
Easp.WN BS("btnGroup").Type("down").Str("下拉菜单").Id(Easp.NewID).Css("btn btn-primary btn-sm").Loop(Json,"li")
Easp.WN BS("btnGroup").Type("up").Str("下拉菜单").Id(Easp.NewID).Css("btn btn-primary btn-sm").Loop(Json,"li")
Easp.WN BS("btnGroup").Str("下拉菜单").Loop(Json,"li")
'======================================================================================='
'表单用数据'
Set Json = Easp.Json.NewArray
For i = 0 To 2
	Json(i) = Easp.Json.NewObject
	Json(i)("id") = Easp.NewID	'ID'
	Json(i)("name") = "ck"&i	'name属性'
	Json(i)("val") = i	'值'
	Json(i)("str") = "选我选我"&i	'名称'
	Json(i)("type") = "inline"	'inline或空'
	Json(i)("disabled") = False	'是否禁用'
Next
'单行布局'
Easp.W "<form class=""form-inline"">"
'表单-文本框'
Easp.W BS("FormInline:text").Label("文本框").Id(Easp.NewID).Val("初始值").PlaceHolder("请输入用户名").Disabled
Easp.W BS("FormInline:text").Label("密码").Type("password").F("ph:请输入密码").HideLabel
'表单-多行文本框'
Easp.W BS("FormInline:textarea").Disabled.Str("多行文本框").Id(Easp.NewID).Val("初始值").PlaceHolder("请输入内容").Row(2)
'使用循环数据前必须指定一下循环给谁用'
Easp.W BS("FormInline:checkbox").Loop(Json,"checkbox")
Easp.W BS("FormInline:radio").Loop(Json,"radio")
'select支持Multiple和Size属性'
Easp.W BS("FormInline:select").Label("下拉菜单").Loop(Json,"select").Multiple.Size(6)
'支持静态控件，主要用来显示不用改的表单项目'
Easp.W BS("FormInline:static").Label("静态控件").Val("用户名")
Easp.W "</form>"

'左右布局时默认为3：9，也可以用.F("col-l:col-sm-2").F("col-r:col-sm-10")指定左右的宽度'
'Easp.W BS("Form:text").Str("文本框").F("col-l:col-sm-2").F("col-r:col-sm-10")'
Easp.W "<form class=""form-horizontal"">"
Easp.W BS("Form:text").Label("文本框").Id(Easp.NewID).F("ph:请输入用户名")
Easp.W BS("Form:text").Label("密码").Type("password").Val("初始值").F("ph:请输入密码")
Easp.W BS("Form:textarea").Label("多行文本框").Type("password").F("ph:请输入内容").Row(5)
Easp.W BS("Form:checkbox").Label("复选框").Loop(Json,"checkbox")
Easp.W BS("Form:radio").Label("单选框").Loop(Json,"radio")
Easp.W BS("Form:select").Label("下拉菜单").Loop(Json,"select")
Easp.W BS("Form:static").Label("静态控件").Val("用户名")
Easp.W "</form>"

Set bs = Nothing
Set Json = Nothing
```
浏览器返回生成的各种元素
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-tag"></i> 应用场景 & 使用心得</label></h4>

应用场景
<h4 class="font-thin"><label class="label bg-info text-white"><i class="fa fa-terminal"></i> 源码解析</label></h4>

easyasp/plugin/easp.bs.asp



</textarea>

</section>

														</section>
													</aside>
												</section>
											</section>
										</section>
									</section>
								</section>
							</section>
						</section>
					</section>
				</section>
			</section>
		</section>		
		<script src="../s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
		<script src="../s1.pstatp.com/cdn/expire-1-M/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<script src="../s2.pstatp.com/cdn/expire-1-M/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script>
		<script src="../s1.pstatp.com/cdn/expire-1-M/prettify/r298/prettify.min.js"></script>
		<script src="inc/editor/lib/marked.min.js"></script>
		<script src="inc/editor/editormd.js"></script>
		<script src="inc/js/app.js"></script>
		<script src="inc/js/jquery.easysearch.js"></script>
		<script>
			
			$(function() {
				var testEditormdView;
				testEditormdView = editormd.markdownToHTML("test-editormd-view", {
					htmlDecode: "style,script,iframe",
					emoji: true,
					editorTheme : "pastel-on-dark",
					taskList: true
				});
			});
			$('input').jSearch({
				selector: 'table',
				child: 'tr > td > a',
				minValLength: 0,
				Before: function() {
					$('table tr').data('find', '');
				},
				Found: function(elem, event) {
					$(elem).parent().data('find', 'true');
					$(elem).parent().parent().show();
				},
				NotFound: function(elem, event) {
					if (!$(elem).parent().data('find'));
					$(elem).parent().parent().hide();
				},
				After: function(t) {
					if (!t.val().length) $('table tr').show();
				}
			});
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "../hm.baidu.com/hm3298.js?7758fff2e207d5773bc5d925a2606368";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
		</script>
	</body>

<!-- Mirrored from easp.jswwl.com/?api/Easp.Plug.Bs by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 13 Nov 2021 05:15:03 GMT -->
</html>